<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/template.xhtml">
    <ui:define name="metadata">
        <f:metadata>
            <f:event type="preRenderView" listener="#{registroPrestamo.initDataObjects()}"/>
        </f:metadata>
    </ui:define>
    <ui:define name="content">
        <section class="content-header">
            <h1>
                Administración
                <small>Registro de Prestamo</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-home"></i> Inicio</a></li>
                <li><a href="#"><i class="fa fa-bar-chart-o"></i> Registro de Prestamo</a></li>
            </ol>
        </section>
        <p:messages autoUpdate="true" id="msgs" showSummary="true" showDetail="true" closable="true"/>
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-primary"> 
                        <br/>
                        <h:form id="registro">
                            <p:panel id="formulario" header="Registro de Prestamo" toggleable="true" widgetVar="formulario">
                                <h:panelGrid columns="4" cellpadding="5">
                                    <h:outputText value="Película: *" style="font-weight:bold;"/>
                                    <p:commandButton icon="ui-icon-video" value="Elegir" process="@none" onclick="PF('dlgPelicula').show();"/>

                                    <h:outputText value="Cliente: *" style="font-weight:bold;"/>
                                    <p:commandButton icon="ui-icon-person" value="Elegir" process="@none" onclick="PF('dlgCliente').show();"/>                        
                                </h:panelGrid>
                            </p:panel>    
                        </h:form>   
                        <br/>
                        <h:form id="detalles">
                            <p:panel id="formulario2" header="Detalles del Prestamo" toggleable="true" widgetVar="formulario2">
                                <h:panelGrid columns="3" cellpadding="5" width="100%">                        
                                    <p:fieldset legend="Película" style="margin-bottom:20px">
                                        <h:panelGrid columns="4" cellpadding="5">
                                            <h:outputText value="Título: " style="font-weight:bold;"/>
                                            <h:outputText value="#{registroPrestamo.slcPelicula.titulo}"/>

                                            <h:outputText value="Director: " style="font-weight:bold;"/>
                                            <h:outputText value="#{registroPrestamo.slcPelicula.director.nombre}"/>

                                            <h:outputText value="Actor: " style="font-weight:bold;"/>
                                            <h:outputText value="#{registroPrestamo.slcPelicula.actor.nombre}"/>

                                            <h:outputText value="Año: " style="font-weight:bold;"/>
                                            <h:outputText value="#{registroPrestamo.slcPelicula.anio}"/>

                                            <h:outputText value="Género: " style="font-weight:bold;"/>
                                            <h:outputText value="#{registroPrestamo.slcPelicula.genero}"/>

                                            <h:outputText value="Nacionalidad: " style="font-weight:bold;"/>
                                            <h:outputText value="#{registroPrestamo.slcPelicula.nacionalidad}"/>

                                            <h:outputText value="Productora: " style="font-weight:bold;"/>
                                            <h:outputText value="#{registroPrestamo.slcPelicula.productora}"/>

                                            <h:outputText value="Portada: " style="font-weight:bold;"/>
                                            <p:lightBox styleClass="imagebox" >
                                                <h:outputLink value="../../resources/images/peliculas/#{registroPrestamo.slcPelicula.id}.#{registroPrestamo.slcPelicula.tipoPortada}" >
                                                    <h:graphicImage value="../../resources/images/peliculas/#{registroPrestamo.slcPelicula.id}.#{registroPrestamo.slcPelicula.tipoPortada}" width="50px" height="50px"/> 
                                                </h:outputLink>
                                            </p:lightBox>
                                        </h:panelGrid>
                                    </p:fieldset>

                                    <p:fieldset legend="Cliente" style="margin-bottom:20px">
                                        <h:panelGrid columns="2" cellpadding="5">
                                            <h:outputText value="Nombre: " style="font-weight:bold;"/>
                                            <h:outputText value="#{registroPrestamo.slcCliente.nombre}"/>

                                            <h:outputText value="Sexo: " style="font-weight:bold;"/>
                                            <h:outputText value="Masculino" rendered="#{registroPrestamo.slcCliente.sexo}"/>
                                            <h:outputText value="Femenino" rendered="#{!registroPrestamo.slcCliente.sexo}"/>

                                            <h:outputText value="Edad: " style="font-weight:bold;"/>
                                            <h:outputText value="#{registroPrestamo.slcCliente.edad}"/>

                                            <h:outputText value="Teléfono: " style="font-weight:bold;"/>
                                            <h:outputText value="#{registroPrestamo.slcCliente.telefono}"/>

                                            <h:outputText value="Dirección: " style="font-weight:bold;"/>
                                            <h:outputText value="#{registroPrestamo.slcCliente.direccion}"/>
                                        </h:panelGrid>
                                    </p:fieldset>

                                    <p:fieldset legend="Prestamo" style="margin-bottom:20px">
                                        <h:panelGrid columns="2" cellpadding="5">
                                            <h:outputText value="Fecha del Prestamo: " style="font-weight:bold;"/>
                                            <h:outputText value="#{registroPrestamo.fechaActual}">
                                                <f:convertDateTime type="date" pattern="dd-MM-yyyy"/>
                                            </h:outputText>

                                            <h:outputText value="Fecha de Devolución: " style="font-weight:bold;"/>
                                            <h:outputText value="#{registroPrestamo.fechaEntrega}">
                                                <f:convertDateTime type="date" pattern="dd-MM-yyyy"/>
                                            </h:outputText>
                                        </h:panelGrid>
                                    </p:fieldset>

                                    <f:facet name="footer">
                                        <p:commandButton value="Cancelar" process="@this" update="@form" actionListener="#{registroPrestamo.resetForm()}" icon="ui-icon-close" style="margin-right:10px"/>
                                        <p:commandButton value="Registrar" icon="ui-icon-disk" actionListener="#{registroPrestamo.save()}" update="@form" style="margin-right:10px">
                                            <p:confirm header="Confirmación" message="Registrar Prestamo?" icon="ui-icon-alert" />
                                        </p:commandButton>
                                    </f:facet>
                                </h:panelGrid>
                            </p:panel>    
                        </h:form> 
                    </div>
                </div>
            </div>
        </section>

        <p:dialog id="dlgCliente" modal="true" dynamic="true" width="800" height="600" widgetVar="dlgCliente" closable="true" resizable="false" appendTo="@(body)" header="Lista de Clientes">
            <h:form id="dlgClienteP">
                <p:dataTable id="tabla" var="u" value="#{registroPrestamo.clientes}" currentPageReportTemplate="(Mostrando: {startRecord} - {endRecord} de: {totalRecords}, Página: {currentPage}/{totalPages})"  
                             paginator="true" rows="10" filterEvent="enter" filteredValue="#{registroPrestamo.clientesFilter}" rowKey="#{u.id}" widgetVar="tabla"
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                             rowsPerPageTemplate="5,10,20,50,100,500" emptyMessage="No se encontraron registros."
                             selectionMode="single" selection="#{registroPrestamo.slcCliente}">
                    <p:ajax event="rowSelect" oncomplete="PF('dlgCliente').hide();" update=":detalles"/>
                    <f:facet name="header">
                        <p:outputPanel>
                            <h:outputText value="Buscar:" />
                            <p:inputText id="globalFilter" onkeyup="PF('tabla').filter()" style="width:150px" placeholder="Ingresa una palabra"/>
                        </p:outputPanel>
                    </f:facet>
                    <p:column style="text-align: center" filterBy="#{u.id}" filterMatchMode="contains"> 
                        <f:facet name="header">  
                            <h:outputText value="ID" />  
                        </f:facet> 
                        <h:outputText value="#{u.id}" />  
                    </p:column>  
                    <p:column style="text-align: center" filterBy="#{u.nombre}" filterMatchMode="contains">  
                        <f:facet name="header">  
                            <h:outputText value="Nombre" />  
                        </f:facet> 
                        <h:outputText value="#{u.nombre}" />  
                    </p:column>  
                    <p:column style="text-align: center" filterBy="#{u.sexo}" filterMatchMode="contains">  
                        <f:facet name="header">  
                            <h:outputText value="Sexo" />  
                        </f:facet> 
                        <h:outputText value="#{u.sexo}" />  
                    </p:column>
                    <p:column style="text-align: center" filterBy="#{u.edad}" filterMatchMode="contains">  
                        <f:facet name="header">  
                            <h:outputText value="Edad" />  
                        </f:facet>
                        <h:outputText value="#{u.edad}" />  
                    </p:column>
                    <p:column style="text-align: center" filterBy="#{u.telefono}" filterMatchMode="contains">  
                        <f:facet name="header">  
                            <h:outputText value="Teléfono" />  
                        </f:facet>
                        <h:outputText value="#{u.telefono}" />  
                    </p:column>
                    <p:column style="text-align: center" filterBy="#{u.direccion}" filterMatchMode="contains">  
                        <f:facet name="header">  
                            <h:outputText value="Dirección" />  
                        </f:facet>
                        <h:outputText value="#{u.direccion}" />  
                    </p:column>               
                </p:dataTable>   
            </h:form>
        </p:dialog>

        <p:dialog id="dlgPelicula" modal="true" dynamic="true" width="800" height="600" widgetVar="dlgPelicula" closable="true" resizable="false" appendTo="@(body)" header="Lista de Peliculas">
            <h:form id="dlgPeliculaP">
                <p:dataTable id="tabla" widgetVar="tabla" var="p" value="#{registroPrestamo.peliculas}" rowKey="#{p.id}"  
                             paginator="true" rows="10" filterEvent="enter" filteredValue="#{registroPrestamo.peliculasFilter}"  
                             paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                             currentPageReportTemplate="(Mostrando: {startRecord} - {endRecord} de: {totalRecords}, Página: {currentPage}/{totalPages})"
                             rowsPerPageTemplate="5,10,20,50,100,500" emptyMessage="No se encontraron registros"
                             selectionMode="single" selection="#{registroPrestamo.slcPelicula}">
                    <p:ajax event="rowSelect" oncomplete="PF('dlgPelicula').hide();" update=":detalles"/>
                    <f:facet name="header">
                        <p:outputPanel>
                            <h:outputText value="Buscar:" />
                            <p:inputText id="globalFilter" onkeyup="PF('tabla').filter()" style="width:150px" placeholder="Ingresa una palabra"/>
                        </p:outputPanel>
                    </f:facet>
                    <p:column style="text-align: center" filterBy="#{p.id}" footerText="contiene" filterMatchMode="contains"> 
                        <f:facet name="header">  
                            <h:outputText value="ID" />  
                        </f:facet> 
                        <h:outputText value="#{p.id}" />  
                    </p:column>  
                    <p:column style="text-align: center" filterBy="#{p.titulo}" footerText="contiene" filterMatchMode="contains">  
                        <f:facet name="header">  
                            <h:outputText value="Título" />  
                        </f:facet> 
                        <h:outputText value="#{p.titulo}" />  
                    </p:column>  
                    <p:column style="text-align: center" filterBy="#{p.nacionalidad}" footerText="contiene" filterMatchMode="contains">  
                        <f:facet name="header">  
                            <h:outputText value="Nacionalidad" />  
                        </f:facet> 
                        <h:outputText value="#{p.nacionalidad}" />  
                    </p:column>
                    <p:column style="text-align: center" filterBy="#{p.productora}" footerText="contiene" filterMatchMode="contains">  
                        <f:facet name="header">  
                            <h:outputText value="Productora" />  
                        </f:facet> 
                        <h:outputText value="#{p.productora}" />  
                    </p:column>
                    <p:column style="text-align: center" filterBy="#{p.anio}" footerText="contiene" filterMatchMode="contains">  
                        <f:facet name="header">  
                            <h:outputText value="Año" />  
                        </f:facet> 
                        <h:outputText value="#{p.anio}" />  
                    </p:column>
                    <p:column style="text-align: center" filterBy="#{p.genero}" footerText="contiene" filterMatchMode="contains">  
                        <f:facet name="header">  
                            <h:outputText value="Género" />  
                        </f:facet> 
                        <h:outputText value="#{p.genero}" />  
                    </p:column>
                    <p:column style="text-align: center" filterBy="#{p.director.nombre}" footerText="contiene" filterMatchMode="contains">  
                        <f:facet name="header">  
                            <h:outputText value="Director" />  
                        </f:facet> 
                        <h:outputText value="#{p.director.nombre}" />  
                    </p:column>
                    <p:column style="text-align: center" filterBy="#{p.actor.nombre}" footerText="contiene" filterMatchMode="contains">  
                        <f:facet name="header">  
                            <h:outputText value="Actor" />  
                        </f:facet> 
                        <h:outputText value="#{p.actor.nombre}" />  
                    </p:column>
                    <p:column headerText="Portada" style="text-align: center;" exportable="false">
                        <p:lightBox styleClass="imagebox" >
                            <h:outputLink value="../../resources/images/peliculas/#{p.id}.#{p.tipoPortada}" >
                                <h:graphicImage value="../../resources/images/peliculas/#{p.id}.#{p.tipoPortada}" width="50px" height="50px"/> 
                            </h:outputLink>
                        </p:lightBox>
                    </p:column>                     
                </p:dataTable>   
            </h:form>
        </p:dialog>

        <p:confirmDialog global="true" showEffect="fade" hideEffect="explode" appendTo="@(body)">
            <h:form>
                <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
            </h:form>
        </p:confirmDialog>
    </ui:define>
</ui:composition>
